從頭開始的Javascript 入門 -函式 day3

前言

• 函式是物件 (除了基本型別以外的都是物件)
• 宣告函式名稱方式常見有兩種:
  函式宣告（Function Declaration）
  函式運算式（Function Expressions）
  透過 new Function 關鍵字建立函式

函式 function

函式是由一系列的敘述句組合而成，以完成一項指定的工作任務。
假設今天，你有一個女朋友專門幫你買早餐（好可能沒有，他還在找你吧ＸＤ） 因為你們還剛磨合，所以不了解你的愛好。所以當第一次要幫你跑腿時，你需要一個詳細指令： 我平常就點對面公園的早餐店 大溫奶＋凱薩沙拉，沙拉醬另外裝，起司蛋餅一份。
下一次幫你買早餐時，就不需要跟他講那麼多了：
幫我買個早餐，寶貝。 她就會找到早餐店並幫你買早餐。
（投資一定有風險，愛情投資有賺有賠，交往前應詳閱公開說明書）
也就是說，妳只需要講一次詳細的指令，女朋友下次聽到“幫我買早餐”
就會想起那些步驟，等一下就會有好吃的早餐可以吃喔！

Ｊavascript 所提供類似機制就稱為函式。

設定好一連串步驟，就像你跟你想像中女朋友講去哪裡買早餐，買什麼東西一樣。當你建立函式時它還不會馬上執行，函式會被存在網頁瀏覽器記憶體中，在任何你需要執行那些步驟時機就可以呼叫它。

要建立一個函式，給它賦予一個名字，並在大括號內寫其工作任務所需程式敘述。這樣的行為稱為函式宣告。

• 宣告一個函式要用function 關鍵字
  function sayNo(){ document.write('hello!'); }
  sayNo() 函式名稱接著一個小括弧，執行工作的敘述句則放置程式區段中
  （在大括弧中）

完成宣告之後，就可以以一行程式碼執行函式大括號所有敘述句，這就是所謂函示呼叫。
sayNo(); 函式名稱

    function isAdult(age) {
        if (age >= 18) {
        return true;
        } else {
        return false;
        }
     }

    var yourAge = 20;
       if (isAdult(yourAge)) {
            console.log('可以觀賞這部電影！');
       } else {
            console.log('抱歉，您的年紀尚無法觀看此部影集！');
         }

如果沒學函式，就要在if裡面寫上判斷，這好處就是你可以重複使用！

參數

有時函式要需要一些自訓才能完成他的工作，宣告函式時需再給予它參數。
這類函式內容中，參數功能就有如變數一般。

function getArea(width,height){ 
 return width * height ;  // 參數在函式中就有如變數的使用方式
} 
(width,height)//參數

當呼叫一個需要資訊的函式，你必須在函式名稱後的括號中傳入需使用的值，這些數值就成為引數，它們可以數值或變數方式傳遞。

• 引數以數值方式傳遞

當以下函式被呼叫時，數值3被傳入作為寬度，數值5則作為高度。

getArea(3,5);

• 引數以變數方式傳遞

當呼叫函式，你不需要使用確定的數值，而是使用變數傳遞至對應的參數。
因此下列方式也可以完成相同的工作。

wallWidth =3;
wallHeight =5;
getArea(wallWidth,wallHeight);

另一種function 定義方式

// 寫法 1    函式宣告（Function Declaration）
function isAdult(age) {
 return (age >= 18);
}
// 寫法 2 函式運算式（Function Expressions）
var isAdult = function(age) {
 return (age >= 18);
}

寫法2是匿名函式 函式被儲存變數isAdult中;
兩者有何不同？

變數提升：用var 會有變數提升的宣告，

function a1(){
  console.log(a1);
}

var a2 = function a2(){
  console.log(a2);
}

a1();
a2();

以上都會出現正確函式宣告

var greeting= a1();
function a1(){
 //執行訊息
}

你可能預期以上會發生錯誤，因為a1()函式在被定義之前就呼叫執行
但他仍然可以正確執行，因為函式和第一句敘述是處於相同執行環境;
故他會被視為如下敘述：

function a1(){
 //執行訊息
}
var greeting= a1();

但是以下就會發生錯誤 因為a1()函式是在 hello()函式執行環境中建立

var greeting= a1();
function hello(){
     function a1(){
        //執行訊息
     }
     //回傳hello~
}

函式取得多個回傳值

函式可使用陣列回傳多個值，例如以下函式可計算和盒子面積與體積

1. 建立一個getSize()函式，會計算盒子面積並將結果儲存於area變數中
2. 體積儲存於volum 這兩變數同存在一個名為size陣列裡
3. 函式將整個陣列回傳至原始碼中呼叫getSize()函式敘述，如此這兩個數值結果可被使用。

function getSize(width,height,depth){
  var area = width * height;
  var volume =width *height *depth;
  var size =[area,volume];
  return size;
}

下一回講陣列